<template>
    <div>
        <div class="comment-text">
            <div class="border-div" ><span></span></div>
            <div class="comment-content" v-for="(comment, index) in replylist"  :key="index">
                <div class="comment-desc">
                  <img class="install-headerimg" v-if="comment.userHeadImage" :src="comment.userHeadImage" />
                  <img class="install-headerimg" v-else src="../../../static/img/installheaderimg.jpg" />
                </div>
                <div class="comment-desc">
                    <flexbox orient="vertical">
                        <flexbox-item><div class="flex-demo">{{comment.userName}}</div></flexbox-item>
                        <flexbox-item><div class="flex-demo">{{comment.content}}</div></flexbox-item>
                        <flexbox-item>
                            <div class="flex-demo">
                                <flexbox class="circle-date">
                                    <flexbox-item><div class="flex-demo">{{comment.createTime | timecircle}}</div></flexbox-item>
                                    <flexbox-item>
                                        <div class="flex-demo">
                                            <span>{{likechoose}}</span><img v-if="!likeshow" @click="like(index)" src="../../../static/img/weidianzan@2x.png" /><img v-if="likeshow" src="../../../static/img/yidianzan@2x.png" />
                                        </div>
                                    </flexbox-item>
                                </flexbox>
                            </div>
                        </flexbox-item>
                    </flexbox>
                </div>
                <p class="clear"></p>
            </div>
            <div v-if="!bordershow" class="check-reply" @click="reply">查看全部回复</div>
            <div class="check-reply"v-if="bordershow">暂无评论</div>
        </div>
    </div>
</template>
<script>
var timeStamp = String(Number(new Date()))
import { Flexbox, FlexboxItem, Popover } from 'vux'
// import ReplyComment from '../../comment/ReplyComment'
import api from '../../api'
import utils from '../../utils'
export default {
  props: ['commentId'],
  data () {
    return {
      replylist: [],
      showlist: [],
      bordershow: false,
      likechoose: null,
      likeshow: false,
      likenum: [],
      tokenval: ''
    }
  },
  components: {
    Flexbox,
    FlexboxItem,
    // ReplyComment,
    Popover
  },
  created () {
    this.tokenval = utils.AuthToken(timeStamp, this.$store.state.userkey)
    var params = {
      Tokenuser: this.tokenval,
      userid: this.$store.state.userID,
      timestamp: timeStamp,
      id: this.commentId
    }
    api.comment(params).then(res => {
      console.log(res)
      if (res.status === 200) {
        this.showlist = res.data.list
        if (this.showlist === undefined || this.showlist.length === 0) {
          this.allreply = false
          this.bordershow = true
        } else {
          this.bordershow = false
          this.replylist.push(this.showlist[0])
        }
        if (this.replylist[0].likeCnt !== undefined) {
          this.likechoose = this.replylist[0].likeCnt
        }
        if (this.replylist[0].likeIt === false) {
          this.likeshow = false
        } else {
          this.likeshow = true
        }
      }
    })
  },
  methods: {
    // 查看全部回复
    reply () {
      this.$router.push('/circle/detail?circle_id=' + this.commentId)
    },
    // 评论点赞
    like (index) {
      var params = {
        Tokenuser: this.tokenval,
        userid: this.$store.state.userID,
        timestamp: timeStamp,
        likeId: this.replylist[index].id
      }
      api.commentlike(params).then(res => {
        console.log(res)
        if (res.status === 200) {
          this.likechoose = this.likechoose + 1
          this.likeshow = true
        }
      })
    }
  }
}
</script>

